<template>
  <div>
    <el-form label-width="80px" :model="page" ref="form">
      <el-row :gutter="24">
        <el-col :span="20">
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('营销APP')" prop="productName" :rules="[
                { required: true, message: $t('请选择APP'),},
              ]">
              <el-col :span="11" style="padding: 0">
                <el-select v-model="page.productName" :placeholder="$t('请选择APP')"
                           @change="productChange" style="width: 100%">
                  <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                             :value="item.productName"></el-option>
                </el-select>
              </el-col>
              <el-col :span="1" style="padding: 0 ;line-height: 32px;text-align: center">-</el-col>
              <el-col :span="11" style="padding: 0">
                <el-form-item prop="marketingUserId" label-width=" " label=""
                              style="margin-bottom: 0px">
                  <el-select v-model="page.marketingUserId" :placeholder="$t('请选择营销员')" style="width: 100%" clearable>
                    <el-option v-for="item in anditList" :key="item.adminUserId" :value="item.adminUserId"
                               :label="item.adminName"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('用户姓名')" prop="name">
              <el-input v-model="page.userName" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('手机号码')" prop="phone">
              <el-input v-model="page.phone" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('身份证号码')" prop="phone" label-width="100px">
              <el-input v-model="page.idcard" clearable/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('营销状态')">
              <el-select style="width: 100%" v-model="page.marketingStatus" clearable>
                <el-option v-for="item in marketingStatus" :key="item.value" :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('跟进次数')">
              <el-input v-model.number="page.marketingNum" class="input-with-select">
                <el-select style="width: 60px" v-model="page.marketingSymbol"
                           slot="prepend">
                  <el-option v-for="item in symbolList" :key="item.label" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('IVR按键')">
              <el-select style="width: 100%" v-model="page.ivrResult" clearable>
                <el-option label="0" value="0"></el-option>
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2" ></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="6" value="6"></el-option>
                <el-option label="7" value="7"></el-option>
                <el-option label="8" value="8"></el-option>
                <el-option label="9" value="9"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item :label="$t('IVR结果')">
              <el-select style="width: 100%" v-model="page.result" clearable>
                <el-option :label="$t('成功接通')" value="成功接通"></el-option>
                <el-option :label="$t('未接通')" value="未接通"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-form-item :label="$t('分单时间')">
              <el-date-picker
                  v-model="page.distributionTimeValue"
                  style="width: 100%"
                  unlink-panels
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="~"
                  :start-placeholder="$t('开始时间')"
                  :end-placeholder="$t('结束时间')">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="4" :xs="24">
          <div style="text-align: right">
            <el-button type="primary" @click="getTableData()">{{ $t('查询') }}</el-button>
            <el-button @click="clearSearch()">{{ $t('重置') }}</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-row style="margin: 10px 0;text-align: right">
        <el-button type="primary" v-show="$permiss[755]" @click="distribution('select')">{{ $t('所选分配') }}</el-button>
        <el-button type="primary" @click="distribution('search')">{{ $t('所搜分配') }}</el-button>
      </el-row>
      <Table :loading="pageLoading" :table-column="tableColumn" :table-data="tableData" :page="page"
             @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange" :select-rows="selectRows" :selection="true"
             @handleSelectionChange="handleSelectionChange">
      </Table>
    </div>
    <!--    分配弹窗-->
    <Dialog
        width="60%"
        :title="visible.title"
        :visible.sync="visible.isShow"
        @close="closeVisible"
        @cancel="visible.isShow = false"
        @confirm="confirm"
        append-body>
      <el-form label-width="50px" ref="distributionForm" :model="distributionPage">
        <el-row :gutter="24">
          <el-col :span="9" :xs="24">
            <el-form-item :label="$t('姓名')" prop="adminName">
              <el-input v-model="distributionPage.adminName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="9" :xs="24">
            <el-form-item :label="$t('账号')" prop="accountNumber">
              <el-input v-model="distributionPage.accountNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" style="text-align: right">
            <el-button type="primary" @click="getAuditPersonnelTable">{{ $t('查询') }}</el-button>
            <el-button @click="resetDistribution">{{ $t('重置') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row style="margin-top: 10px">
        <Table :table-data="anditTableList" :page="false"
               max-height="400px"
               :selection="true"
               :select-rows="andiSelectRows"
               :table-column="distributionTableColumn"
               @handleSelectionChange="andiSelectionChange">
        </Table>
      </el-row>
    </Dialog>
  </div>
</template>

<script>
import {dataSingleList, dataSelectTransferOrder, dataSearchTransferOrder} from '@/api/marketing'
import {selectMarketingStaff} from "@/api/system";
import {dateFormatSection} from "@/utils/tools";

export default {
  name: "transferOrder",
  props: {
    productList: {
      type: Array,
    },
  },
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        type: 1,
        marketingSymbol: '>='
      },
      pageLoading: false,
      anditTableList: [],
      anditList: [],
      selectRows: [],
      tableData: [],
      tableColumn: [
        {label: this.$t('用户姓名'), prop: 'userName', align: 'center'},
        {label: this.$t('手机号码'), prop: 'phone', align: 'center'},
        {label: this.$t('身份证号码'), prop: 'idcard', align: 'center'},
        {label: this.$t('分单时间'), prop: 'allocationTime', align: 'center', minWidth: 150},
        {label: this.$t('跟进次数'), prop: 'marketingNum', align: 'center'},
        {label: this.$t('跟进时间'), prop: 'marketingTime', align: 'center'},
        {label: this.$t('是否黑名单'), prop: 'isBlack', align: 'center'},
        {label: this.$t('营销APP'), prop: 'appName', align: 'center'},
        {label: this.$t('营销员'), prop: 'marketingUserName', align: 'center'},
      ],
      symbolList: [
        {label: '>', value: '>'},
        {label: '=', value: '='},
        {label: '≧', value: '>='},
        {label: '≦', value: '<='},
        {label: '<', value: '<'}
      ],
      marketingStatus: [
        {label: this.$t('未注册'), value: 1},
        {label: this.$t('未申请'), value: 2},
      ],
      visible: {
        isShow: false,
        title: '',
        type: ''
      },
      distributionPage: {},
      distributionTableData: [],
      distributionTableColumn: [
        {label: this.$t('营销员'), prop: 'adminName', align: 'center'},
        {label: this.$t('账号'), prop: 'accountNumber', align: 'center'},
      ],
      andiSelectRows: [],
    }
  },
  methods: {
    async getTableData() {
      this.$refs.form.validate(async v => {
        if (v) {
          this.pageLoading = true
          if (!this.productName) return this.$message.error(this.$t('请先选择App'))
          const [allocationStart, allocationEnd] = dateFormatSection(this.page.distributionTimeValue || [])
          const params = {...this.page, isDistribution: 1, allocationStart, allocationEnd}
          delete params.distributionTimeValue
          const res = await dataSingleList(params)
          if (res.code === 1) {
            const {list, total} = res.data
            this.tableData = list.map(i => {
              i.isBlack = i.isBlack === 0 ? this.$t('否') : i.isBlack === 1 ? this.$t('是') : ''
              return i
            })
            this.page = Object.assign({}, this.page, {
              total: total
            })
            this.pageLoading = false
          } else {
            this.tableData = []
            this.pageLoading = false
          }
        }
      })

    },
    distribution(type) {
      if (type === 'select' && this.selectRows.length === 0) return this.$message.error('请勾选要分配的订单')
      this.$refs.form.validate(async v => {
        if (v) {
          await this.getAuditPersonnelTable()
          this.visible = {
            title: type === 'select' ? this.$t('所选分配') : this.$t('所搜分配'),
            type: type,
            isShow: true
          }
        }
      })

    },
    // 清空搜索框
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        distributionStatus: 0,
        marketingSymbol: '>='
      }
      this.anditList = []
      this.tableData = []
      this.$refs.form.resetFields()
    },
    closeVisible() {
      this.distributionPage = {}
      this.$refs.distributionForm.resetFields()
    },
    // app名称下拉
    productChange(value) {
      this.productName = value
      if (this.page.marketingUserId) {
        this.$set(this.page, 'marketingUserId', null)
      }
      this.getAuditPersonnelSelect()
    },

    // 获取分配表格信审员列表
    async getAuditPersonnelTable() {
      this.anditTableList = await selectMarketingStaff({
        productName: this.productName,
        ...this.distributionPage,
        type: 1,
        valid: 1,
      }).then(res => res.data)
    },
    // 获取下拉信审员列表
    async getAuditPersonnelSelect() {
      this.anditList = await selectMarketingStaff({
        productName: this.productName,
        type: 1
      }).then(res => res.data)
    },
    // 信审员全选
    andiSelectionChange(value) {
      this.andiSelectRows = value
    },
    // 清空分配弹窗
    resetDistribution() {
      this.distributionPage = {}
      this.$refs.distributionForm.resetFields()
      this.getAuditPersonnelTable()
    },
    clearForm() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        marketingSymbol: '>='
      }
      this.anditList = []
      this.$refs.form.resetFields()
    },
    async confirm() {
      if (this.andiSelectRows.length === 0) return this.$message.error(this.$t('请选择营销员'))
      const auditIds = this.andiSelectRows.map(item => item.adminUserId)
      const userIdList = this.selectRows.map(item => item.dataUserId)
      let params = {}
      if (this.visible.type === 'select') {
        // 所选分配
        params = {
          sysUserId: auditIds,
          dataUserIdList: userIdList,
        }
      } else {
        // 所搜分配
        const [allocationStart, allocationEnd] = dateFormatSection(this.page.distributionTimeValue || [])
        params = {
          marketingUserIdList: auditIds,
          allocationStart, allocationEnd,
          ...this.page
        }
        delete params.distributionTimeValue
      }
      const api = (params) => this.visible.type === 'select' ? dataSelectTransferOrder(params) : dataSearchTransferOrder(params)
      const res = await api(params)
      if (res.code === 1) {
        this.$message.success(this.$t('操作成功'))
        this.andiSelectRows = []
        this.visible.isShow = false
        this.getAuditPersonnelTable()
        this.getTableData()
        // 通知父组件刷新列表
        this.$emit('confirm')
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    // 订单编号
    handleSelectionChange(val) {
      this.selectRows = val
    },

  }
}
</script>

<style scoped>

</style>
